<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
						:placeholder="$t('common.select_all')"
						@change="handleMerchantChange"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.timeType" style="width:150px">
						<el-option
							:label="`${$t('common.register_time')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('member.first_deposit_date_time')}`"
							value="1"
						></el-option>
						<el-option
							:label="`${$t('member.last_login_date_time')}`"
							value="2"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="registerTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						value-format="timestamp"
						style="width: 375px"
						:default-time="defaultTime"
						@focus="reloadTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="queryData.userNameType"
						style="width:150px"
					>
						<el-option
							:label="`${$t('common.member_number')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('member.nickname')}`"
							value="4"
						></el-option>
						<el-option
							:label="`${$t('common.top_agent')}`"
							value="2"
						></el-option>
						<el-option label="所属代理" value="5"></el-option>
						<el-option
							:label="
								`${$t('member.general_representative_name')}`
							"
							value="3"
						></el-option>
					</el-select>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.userName"
						size="medium"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 278px"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.number_type')}:`">
					<el-select
						v-model="queryData.accountType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="item in accountTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.business_model')}:`"
					label-width="77px"
				>
					<business-model-selector
						v-model="queryData.businessModel"
						:value="queryData.businessModel"
					/>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.account_status')}:`"
					label-width="77px"
				>
					<el-select
						v-model="queryData.accountStatus"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="item in accountStatusArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('member.rebate_status')}:`"
					label-width="77px"
				>
					<el-select
						v-model="queryData.rebateFreezeStatus"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							:label="`${$t('common.account_status_normal')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('common.account_status_suspend')}`"
							value="1"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('common.vip_level')}:`">
						<el-select
							v-model="queryData.vipLevel"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
							collapse-tags
						>
							<el-option
								v-for="item in vipRiskList"
								:key="item.id"
								:label="item.gradeName"
								:value="item.id"
							></el-option>
						</el-select>
					</el-form-item> -->
				<el-form-item
					:label="`${$t('common.risk_control_level')}:`"
					label-width="77px"
				>
					<el-select
						v-model="queryData.windControlId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
					>
						<el-option
							v-for="item in vipDict"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.register_device')}:`"
					label-width="77px"
				>
					<el-select
						v-model="queryData.registerDeviceType"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						collapse-tags
					>
						<el-option
							v-for="item in deviceTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item :label="`${$t('member.first_deposit')}:`">
					<el-input
						v-model="queryData.firstDepositMin"
						v-input="{ name: 'int' }"
						size="medium"
						:placeholder="$t('common.minimum')"
						style="width: 133px"
						clearable
						name="firstDepositMin"
						@blur="checkValue($event)"
					></el-input>
					-
					<el-input
						v-model="queryData.firstDepositMax"
						v-input="{ name: 'int' }"
						size="medium"
						:placeholder="$t('common.maximum')"
						style="width: 133px"
						clearable
						name="firstDepositMax"
						@blur="checkValue($event)"
					></el-input>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('member.currency')}:`">
						<el-select
							v-model="queryData.currency"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
							collapse-tags
						>
							<el-option
								v-for="item in currencySymbol"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item> -->

				<el-form-item>
					<el-select v-model="queryData.ipType" style="width:150px">
						<el-option
							:label="`${$t('member.register_ip')}`"
							value="0"
						></el-option>
						<el-option
							:label="`${$t('member.last_login_ip')}`"
							value="1"
						></el-option>
					</el-select>
					<el-input
						v-model.trim="queryData.ip"
						clearable
						size="medium"
						style="width: 195px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="queryData.inputType"
						style="width:150px"
					>
						<el-option
							:label="`${$t('member.device_no')}`"
							value="0"
						></el-option>
						<el-option
							:label="
								`${$t('common.components.virtual_address')}`
							"
							value="1"
						></el-option>
					</el-select>
					<el-input
						v-model.trim="queryData.inputValue"
						clearable
						size="medium"
						style="width: 195px"
						v-input="{ name: 'noEmpty' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('101011')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<MemberProxyBatch
				userType="member"
				:loading="loading"
				creditPermissionId="90360055"
				accountPermissionId="90360056"
				:isShowBatch.sync="isShowBatch"
				:batchUserList="batchUserList"
				@resetBatchUser="resetBatchUser"
				@loadData="loadData"
			/>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
				ref="dataTable"
				@select="handleSelectionChange"
				@select-all="handleSelectionChange"
			>
				<el-table-column
					v-if="isShowBatch"
					type="selection"
					align="center"
					width="80"
				></el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="$t('common.member_number')"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.nickname')]"
					prop="nickName"
					align="center"
					:label="$t('member.nickname')"
					min-width="120px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.belong_merchant')]"
					prop="merchantId"
					align="center"
					min-width="190"
					:label="$t('common.belong_merchant')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId) || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.top_agent')]"
					prop="parentProxyName"
					align="center"
					min-width="150"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('common.top_agent') }}
						<br />
						{{ $t('common.components.agent_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
						<br />
						<span>
							{{ scope.row.parentProxyLevel || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('member.general_representative_name')
						]
					"
					prop="accountType"
					align="center"
					min-width="150"
					:label="$t('member.general_representative_name')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.number_type')]"
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.business_model')]"
					prop="businessModel"
					align="center"
					:label="`${$t('common.business_model')}`"
					min-width="100"
				>
					<template slot-scope="scope">
						{{
							mappingBusinessModel(scope.row.businessModel) || '-'
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[$t('common.components.virtual_address')]
					"
					prop="virAddr"
					align="center"
					:label="$t('common.components.virtual_address')"
					min-width="200"
				>
					<template slot-scope="scope">
						<div
							v-for="(item, index) in (
								scope.row.virAddr || ''
							).split(',')"
							:key="index"
						>
							{{ item || '-' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.mailbox')]"
					prop="email"
					align="center"
					min-width="150"
					:label="$t('member.mailbox')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.email || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.label_name')]"
					prop="labelName"
					align="center"
					:label="$t('member.label_name')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.labelName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.risk_control_level')]"
					prop="windControlName"
					align="center"
					:label="$t('common.risk_control_level')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.windControlName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.account_status')]"
					prop="accountStatus"
					align="center"
					:label="$t('common.account_status')"
					:min-width="getWidth(100)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.liquidationStatus === 1 ||
									scope.row.liquidationStatus === 2
							"
							class="disableRgba"
						>
							{{ $t('agent.liquidation') }}
						</span>
						<span v-else>
							<span
								v-if="!!scope.row.paymentLockStatus"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
								<br />
							</span>
							<span
								v-if="!!scope.row.loginLockStatus"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
								<br />
							</span>
							<span
								v-if="!!scope.row.gameLockStatus"
								class="lockingRgba"
							>
								{{ $t('common.game_lock_status') }}
							</span>
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
										scope.row.gameLockStatus === 0 &&
										scope.row.paymentLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[$t('member.rebate_status')]"
					prop="rebateFreezeStatus"
					align="center"
					:label="$t('member.rebate_status')"
					:min-width="getWidth(100)"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="
								scope.row.rebateFreezeStatus === 1
							"
							class="disableRgba"
						>
							{{ $t('common.account_status_suspend') }}
						</span>
						<span v-else>
							<span
								v-if="
									scope.row.rebateFreezeStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</span>
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="vipLevel"
						align="center"
						:label="$t('common.vip_level')"
						min-width="100"
					>
						<template slot-scope="scope">
							<span
								v-if="
									!!scope.row.vipLevel ||
										scope.row.vipLevel + '' === '0'
								"
							>
								{{ scope.row.vipLevel }}
							</span>
							<span v-else>-</span>
						</template>
					</el-table-column> -->
				<el-table-column
					v-if="tableColumnData[$t('member.credit_rating')]"
					prop="creditLevel"
					align="center"
					:label="$t('member.credit_rating')"
					min-width="100"
				>
					<template slot-scope="scope">
						<span
							v-if="
								!!scope.row.creditLevel ||
									scope.row.creditLevel === 0
							"
						>
							{{ scope.row.creditLevel }}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.first_deposit')]"
					prop="firstDeposit"
					align="center"
					min-width="200"
					:label="$t('member.first_deposit')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.firstDeposit
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.first_deposit_date_time')]"
					prop="firstDepositDatetime"
					align="center"
					min-width="160px"
					:label="$t('member.first_deposit_date_time')"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.firstDepositDatetime || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.balance')]"
					prop="balance"
					align="center"
					:label="$t('member.balance')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(scope.row.currency, scope.row.balance)
						}}
					</template>
				</el-table-column>
				<!-- 信用钱包余额 -->
				<el-table-column
					v-if="tableColumnData[$t('member.credit_balance')]"
					prop="creditAvailable"
					align="center"
					:label="$t('member.credit_balance')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.creditAvailable
							)
						}}
					</template>
				</el-table-column>
				<!-- 信用额度 -->
				<el-table-column
					v-if="tableColumnData[$t('report.credit_limit')]"
					prop="creditBalance"
					align="center"
					:label="$t('report.credit_limit')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.creditBalance
							)
						}}
					</template>
				</el-table-column>
				<!-- 应收账款 -->
				<el-table-column
					v-if="tableColumnData[$t('report.receivable_accounts')]"
					prop="creditShouldRepayment"
					align="center"
					:label="$t('report.receivable_accounts')"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.creditShouldRepayment
							)
						}}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('agent.total_deposit_amount')]"
					prop="totalDeposit"
					align="center"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('agent.total_deposit_amount') }}
						<br />
						{{ $t('agent.total_deposit_times') }}
					</template>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalDeposit
								)
							}}
						</span>
						<br />
						<span>
							{{ scope.row.totalDepositNum || 0 }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('agent.total_withdrawal_amount')]"
					prop="totalWithdraw"
					align="center"
					min-width="200"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('agent.total_withdrawal_amount') }}
						<br />
						{{ $t('agent.total_withdrawal_times') }}
					</template>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.totalWithdraw
								)
							}}
						</span>
						<br />
						<span>
							{{ scope.row.totalWithdrawNum || 0 }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.register_device')]"
					prop="registerDeviceType"
					align="center"
					:label="$t('common.register_device')"
					min-width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="!!scope.row.registerDeviceType">
							{{
								getTypeName(
									scope.row.registerDeviceType,
									deviceTypeMember
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('member.device_no')]"
					prop="registerDeviceNo"
					align="center"
					min-width="200"
					:label="$t('member.device_no')"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.lastLoginDeviceNo || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.register_time')]"
					prop="createDt"
					align="center"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('common.register_time') }}
						<br />
						{{ $t('member.register_ip') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
						<br />
						<span>
							{{ scope.row.registerIp || '-' }}
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-if="tableColumnData[$t('member.last_login_date_time')]"
					prop="lastLoginTime"
					align="center"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('member.last_login_date_time') }}
						<br />
						{{ $t('member.last_login_ip') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.lastLoginDatetime || '-' }}
						<br />
						<span>
							{{ scope.row.lastLoginIp || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="tableColumnData[$t('common.remark')]"
					prop="remark"
					align="center"
					:label="$t('common.remark')"
					min-width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" @click="clickDel">复原缺省</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
// import summaryList from './components/summaryList'
import BusinessModelSelector from '@/components/Form/BusinessModelSelector.vue'
import MemberProxyBatch from '@/components/MemberProxyBatch'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(89, 'day')
		.valueOf()

const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()

export default {
	name: routerNames.memberList,
	components: {
		MainContent,
		BusinessModelSelector,
		MemberProxyBatch
	},
	mixins: [list],
	data() {
		// this.loadData = this.throttle(this.loadData, 1000)
		// this.reset = this.throttle(this.reset, 1000)
		return {
			isShowBatch: false,
			batchUserList: [],
			batchUserMap: new Map(),
			exportBtnLoading: false,
			// registerTime: [start(), end()],
			registerTime: undefined,
			tableHeight: 480,
			otherDependenComponents: ['addBtn'],
			queryData: {
				businessModel: null,
				windControlId: undefined,
				userNameType: '0',
				ipType: '0',
				ip: undefined,
				timeType: '0',
				userName: undefined,
				nickName: undefined,
				accountStatus: undefined,
				offLineDaysStart: undefined,
				offLineDaysEnd: undefined,
				lastLoginTime: undefined,
				transforNumMin: undefined,
				transforNumMax: undefined,
				accountType: undefined,
				firstDepositMin: undefined,
				firstDepositMax: undefined,
				firstSaveTime: undefined,
				labelId: undefined,
				parentProxyName: undefined,
				orderKey: undefined,
				orderType: undefined,
				// creditLevel: undefined,
				appId: undefined,
				inputType: '0',
				inputValue: undefined
			},
			dataList: undefined,
			// creditLevelList: undefined, // 信用等级
			total: 0,
			vipDict: undefined,
			userLabel: undefined,
			colSettings: {
				visible: false,
				dialogColumnData: {}
			},
			subSummary: {},
			totalSummary: {},
			activityListField: {
				// 会员账号: true,
				// 会员昵称: true,
				// 所属商户: true,
				// 上级代理: true,
				// 总代账号： true，
				// 账号类型: true,
				// 邮箱: true,
				// 会员标签： true
				// 风控层级： true
				// 账号状态： true
				// 会员返水状态: true
				// 中心钱包余额： true
				// 信用钱包余额： true
				// 信用额度： true
				// 应收账款： true
				// 注册终端： true
				// 注册时间： true
				// 最后登录时间： true
				// 备注：true
				// [this.$t('common.member_number')]: true,
				[this.$t('member.nickname')]: true,
				[this.$t('common.belong_merchant')]: true,
				[this.$t('common.top_agent')]: true,
				[this.$t('member.general_representative_name')]: true,
				[this.$t('common.number_type')]: true,
				[this.$t('common.business_model')]: true,
				[this.$t('common.components.virtual_address')]: true,
				[this.$t('member.mailbox')]: true,
				[this.$t('member.label_name')]: true,
				[this.$t('common.risk_control_level')]: true,
				[this.$t('member.rebate_status')]: true,
				[this.$t('common.account_status')]: true,
				[this.$t('member.credit_rating')]: true,
				[this.$t('member.first_deposit')]: true,
				[this.$t('member.first_deposit_date_time')]: true,
				[this.$t('member.balance')]: true,
				[this.$t('member.credit_balance')]: true,
				[this.$t('report.credit_limit')]: true,
				[this.$t('report.receivable_accounts')]: true,
				[this.$t('agent.total_deposit_amount')]: true,
				[this.$t('agent.total_withdrawal_amount')]: true,
				[this.$t('common.register_device')]: true,
				[this.$t('member.device_no')]: true,
				[this.$t('common.register_time')]: true,
				[this.$t('member.last_login_date_time')]: true,
				[this.$t('common.remark')]: true
			},
			deviceTypeMember: [
				{
					code: '2',
					description: 'IOS'
				},
				{
					code: '5',
					description: 'Android'
				},
				{
					code: '1',
					description: 'PC'
				},
				{
					code: '6',
					description: '中控后台'
				},
				{
					code: '7',
					description: '代理后台'
				}
			]
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		// vipRiskList() {
		// 	return [
		// 		{ id: 0, gradeName: '0' },
		// 		{ id: 1, gradeName: '1' },
		// 		{ id: 2, gradeName: '2' },
		// 		{ id: 3, gradeName: '3' },
		// 		{ id: 4, gradeName: '4' },
		// 		{ id: 5, gradeName: '5' },
		// 		{ id: 6, gradeName: '6' },
		// 		{ id: 7, gradeName: '7' },
		// 		{ id: 8, gradeName: '8' },
		// 		{ id: 9, gradeName: '9' },
		// 		{ id: 10, gradeName: '10' }
		// 	]
		// },
		accountStatusArr({ $attrs, $route, $store, $listeners, $ref }) {
			// console.log('$attrs', $attrs)
			// console.log('$route', $route)
			// console.log('$store', $store)
			// console.log('$listeners', $listeners)
			return this.globalDics.accountStatusType2 || []
		},
		accountTypeArr() {
			return this.globalDics.accountType || []
		},
		deviceTypeArr() {
			return this.deviceTypeMember || []
		},

		appIdArr() {
			return this.globalDics.appId || [[]]
		},
		currencySymbol() {
			return this.globalDics.currencySymbol || [[]]
		}
	},
	// watch: {
	// 	creditLevel(newVal, oldVal) {
	// 		const newIdx = newVal.indexOf('all')
	// 		const oldIdx = oldVal.indexOf('all')
	// 		if (newIdx !== -1 && oldIdx === -1 && newVal.length > 1) {
	// 			this.queryData.creditLevel = ['all']
	// 		} else if (newIdx !== -1 && oldIdx !== -1 && newVal.length > 1) {
	// 			this.queryData.creditLevel.splice(newVal.indexOf('all'), 1)
	// 		}
	// 	}
	// },
	created() {
		// this.getVipRisk({ merchantId: this.merchantInfo.topMerchantId })
		// this.getMemberLabelDict()
		// this.initCreditLevelList()
		this.initIndexDB('memberList', this.activityListField)
		this.handleMerchantChange()
	},
	mounted() {},
	methods: {
		resetBatchUser() {
			this.batchUserMap.clear()
			this.batchUserList = []
		},
		setBatchRowSelect() {
			if (!this.isShowBatch) return
			this.$refs.dataTable.$nextTick((_) => {
				this.dataList.forEach((item, index) => {
					const flag = this.batchUserList.find(
						(row) => row.userName == item.userName
					)
					if (flag) {
						this.$refs.dataTable.toggleRowSelection(
							this.dataList[index],
							true
						)
					}
				})
			})
		},
		handleSelectionChange(val, row) {
			this.dataList.forEach((item) => {
				const checkItem = val.find(
					(row) =>
						row.userName === item.userName &&
						row.merchantId === item.merchantId
				)
				const mapKey = item.userName + '-' + item.merchantId
				if (checkItem) {
					this.batchUserMap.set(mapKey, {
						userName: item.userName,
						merchantId: item.merchantId
					})
				} else {
					this.batchUserMap.delete(mapKey)
				}
			})
			this.batchUserList = [...this.batchUserMap.values()]
		},
		// 复原缺省
		clickDel() {
			const activityListColumn = {}
			Object.keys(this.activityListField).forEach((item) => {
				activityListColumn[item] = true
			})
			this.dialogColumnData = Object.assign({}, activityListColumn)
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			this.updateIndexDB()
		},
		// 打开列设置弹框
		openColSettings() {
			this.getIndexDB(this.activityListField)
			this.colSettings.visible = true
		},
		search() {
			this.pageNum = 1
			this.isShowBatch = false
			this.resetBatchUser()
			this.loadData()
		},
		loadData() {
			const [startTime, endTime] = this.registerTime || []
			let params = {
				...this.queryData,
				timeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				timeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				...this.getParams(params)
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === '0') {
				params.deviceNo = params.inputValue || undefined
				params.virAddr = undefined
			} else {
				params.virAddr = params.inputValue || undefined
				params.deviceNo = undefined
			}
			delete params.inputValue
			delete params.inputType
			this.dataList = []
			this.subSummary = {}
			this.totalSummary = {}
			this.loading = true
			if (params.businessModel === '') {
				delete params.businessModel
			}
			this.$api
				.memberListAPI(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
						this.setBatchRowSelect()
						// this.subSummary = summary[0] || {}
						// this.totalSummary = summary[1] || {}
					} else {
						this.$message({
							message:
								res?.msg || this.$t('common.interface_error'),
							type: 'error'
						})
					}
				})
				.catch(() => (this.loading = false))
		},

		handleMerchantChange() {
			this.getWindControllerLevelDict({
				windControlType: 1,
				merchantId: this.queryData.merchantId
			})
			// this.getVipRisk({ merchantId: this.queryData.merchantId })
		},
		// 获取风控层级
		getWindControllerLevelDict(val) {
			this.queryData.windControlId = undefined
			this.vipDict = []
			this.$api.getSelectWindControlLevel(val).then((res) => {
				if (res?.code === 200) {
					this.vipDict = res.data || []
				}
			})
		},
		// getVipRisk(val) {
		// 	this.$api.getMemberRiskAPI(val).then((res) => {
		// 		const { code, data } = res
		// 		if (code === 200) {
		// 			this.vipRiskList = data || []
		// 		}
		// 	})
		// },
		reloadTime() {
			this.formTime.time = [start(), end()]
		},
		reset() {
			this.pageNum = 1

			// const end = dayjs().endOf('day')
			// const start = dayjs()
			// 	.startOf('day')
			// 	.subtract(92, 'day')
			// this.registerTime = [start(), end()]
			this.registerTime = undefined
			this.queryData = {
				userNameType: '0',
				ipType: '0',
				timeType: '0',
				userName: undefined,
				nickName: undefined,
				accountStatus: undefined,
				windControlId: undefined,
				offLineDaysStart: undefined,
				offLineDaysEnd: undefined,
				lastLoginTime: undefined,
				// vipSerialNumMax: undefined,
				// vipSerialNumMin: undefined,
				transforNumMin: undefined,
				transforNumMax: undefined,
				accountType: undefined,
				deviceType: undefined,
				firstDepositMin: undefined,
				firstDepositMax: undefined,
				labelId: undefined,
				parentProxyName: undefined,
				orderKey: undefined,
				orderType: undefined,
				inputType: '0',
				inputValue: undefined
			}
			this.$refs['form'].resetFields()
			this.isShowBatch = false
			this.resetBatchUser()
			this.loadData()
		},

		checkValue(e) {
			const { name, value } = e.target
			switch (name) {
				case 'firstDepositMin':
					if (
						!!this.queryData.firstDepositMax &&
						value &&
						value * 1 > this.queryData.firstDepositMax * 1
					) {
						this.$message({
							type: 'warning',
							message: `${this.$t(
								'member.please_enter_less_than'
							) +
								this.queryData.firstDepositMax +
								this.$t('member.amount_of_money')}`
						})
						this.queryData.firstDepositMin = undefined
					} else {
						this.queryData.firstDepositMin = value
					}
					break
				case 'firstDepositMax':
					if (
						!!this.queryData.firstDepositMin &&
						value &&
						value * 1 < this.queryData.firstDepositMin * 1
					) {
						this.$message({
							type: 'warning',
							message: `${this.$t(
								'member.please_enter_greater_than'
							) +
								this.queryData.firstDepositMin +
								this.$t('member.amount_of_money')}`
						})
						this.queryData.firstDepositMax = undefined
					} else {
						this.queryData.firstDepositMax = value
					}
					break
			}
		},
		exportExcel() {
			const [startTime, endTime] = this.registerTime || []
			let params = {
				...this.queryData,
				timeStart: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				timeEnd: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				...this.getParams(params)
			}
			params = {
				...this.getParams(params)
			}
			if (params.inputType === '0') {
				params.deviceNo = params.inputValue || undefined
				params.virAddr = undefined
			} else {
				params.virAddr = params.inputValue || undefined
				params.deviceNo = undefined
			}
			delete params.inputValue
			delete params.inputType
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportExcelAPI',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep
	.el-table__header
	.el-table-column--selection
	.cell
	.el-checkbox:after {
	content: '全选';
	font-size: 12px;
	margin-right: -25px;
	margin-left: 5px;
}
</style>
